
<template>

<div>
     <!-- 历史搜索 -->  
     <div v-show="hisoryShow">
     
         <h3 >
            <p> 历史记录</p>
            <van-icon name="delete" @click="clear" />
         </h3>
         <div class="history-box">
              <van-tag  v-for="item in historyArr" :key="item"
              color="#ccc"  type="danger"
              @click="historyTag(item)"
            
              >{{item}}</van-tag>
         </div>
    </div>
    <!-- 热门搜索 -->  
     <div>
     
         <h3 >
            <p>热门搜索</p>
         </h3>
         <div class="hot-box">
              <van-tag 
               @click="hotTag(item.keyword)"
               plain  
               v-for="(item,index) in hottArr" 
               :key="index"  
               :type="item.is_hot==1?'danger':'default'"
              >{{item.keyword}}</van-tag>
         </div>
    </div>



    
</div>
   
</template>

<script>
import {ClearApi} from "@/utils/https.js"
export default {
     data(){return {hisoryShow:true}},
     props:["historyArr","hottArr"],
     methods:{
        //清除历史记录
        clear(){
               ClearApi().then(res=>{console.log(res)});
               this.hisoryShow=false
        },
        //点击按钮的时候
        historyTag(val){
            //子传父
            this.$emit("transfer",val)

        },
        hotTag(val){
            this.$emit("transfer1",val)
        } 

     }

}
</script>

<style lang="less" scoped>
   h3{display: flex; justify-content:space-between;padding: 10PX;
      box-sizing: border-box; font-size: 16PX;
     }
.history-box{padding: 10PX; box-sizing: border-box;
             display: flex;
             flex-wrap:wrap;
             span{display:block; padding: 10PX;margin: 5PX;
                color: black; background:rgb(238, 237, 237) ;}

        }
.hot-box{display: flex;padding: 10PX; box-sizing: border-box;
         flex-wrap:wrap;
         span{
                padding: 10PX; margin: 10PX;
         }}

</style>